import React,{Component}from 'react'
import {Checkbox} from 'antd';
import '../views/css/bases.css'
class Rolecheck extends Component{
    constructor(props){
        super(props);
        this.state = {
            rolelist:this.props.rolelist
        };
    }
    componentDidMount() {}
    //全选控制
    onCheckAllChange = idx => {
        var info = this.state.rolelist
        if(info[idx].children.length === 0){
            info[idx].select = !info[idx].select
        }else if(info[idx].select){
            for(var i=0;i<info[idx].children.length;i++){
                info[idx].children[i].select = false
            }
        }else{
            for(var j=0;j<info[idx].children.length;j++){
                info[idx].children[j].select = true
            }
        }
        this.setState({rolelist:info})
        this.monitorrolelist(idx)
    };
    // 改变状态
    onChange = (idx,idxt) => {
        var info = this.state.rolelist
        info[idx].children[idxt].select = !info[idx].children[idxt].select
        this.setState({rolelist:info})
        this.monitorrolelist(idx)
    }
    //样式控制
    monitorrolelist(idx){
        var info = this.state.rolelist
        var roledtlist = info[idx].children
        var num = 0
        for(var i=0;i<roledtlist.length;i++){
            if(roledtlist[i].select){
                num ++
            }
        }
        if(roledtlist.length === num){
            info[idx].selectall =false;
            info[idx].select =true;
        }else if(num === 0){
            info[idx].select =false;
            info[idx].selectall =false;
        }else{
            info[idx].select =true;
            info[idx].selectall =true;
        }
    }
    render(){
        const self = this; 
        return(
            <div onClick={()=>this.props.Getrolecheck(this.state.rolelist)}>
                {this.state.rolelist.map(function(item,index){
                    return(
                        <div key={item.id} style={{ borderBottom: '1px solid #E9E9E9' }}>
                            <Checkbox key={item.id} indeterminate={item.selectall} onChange={self.onCheckAllChange.bind(self,index)} checked={item.select}>{item.menuName}</Checkbox>
                            <br />
                            {item.children.map(function(itemtwo,indext){
                                return(
                                    <Checkbox key={itemtwo.id} onChange={self.onChange.bind(self,index,indext,itemtwo)}  checked={itemtwo.select}>{itemtwo.menuName}</Checkbox>
                                )
                            })}
                        </div>
                    )
                })}     
            </div>         
        )
    }
}
export default Rolecheck